* {
    padding: 0;
    margin: 0;
}

.container3 {
    background-image: url(../images/list-bg.webp) !important;
    background-size: cover;
    position: relative;
    height: 100vh;
}

.logo {
    position: absolute;
    top: 0px;
    left: 40%;
    width: 479px;
    height: 129px;
    background-image: url(../images/logo.png);
    background-size: cover;
}

.role {
    position: relative;
    width: 190px;
    height: 270px;
    background: url(../images/girl-bg.webp) 68px top no-repeat;
    margin-top: 60px;
    cursor: pointer;
}

.design {
    position: absolute;
    top: 20%;
    left: 66%;
    height: 393px;
    width: 251px;

}

.doll {
    position: absolute;
    top: 52px;
    left: 8px;
    width: 203px;
    height: 233px;
    cursor: pointer;
    z-index: 8;
    background: url(../images/mouse-move-girl.webp) -406px 0 no-repeat;
    background-size: 1015px 233px;
}

.list {
    position: absolute;
    top: 15%;
    left: 25%;
    height: 600px;
    width: 450px;
    /* display: flex;
    flex-direction: column; */
    background-color: #fff;
    padding: 45px;
    border-radius: 25px;
}

#add-btn {
    position: absolute;
    top: 45px;
    right: 43px;
}

#add-content {
    display: inline-block;
    font-size: 18px;
    background-color: transparent;
    border: none;
    outline: none;
    height: 32px;
    width: 320px;
    color: #878484;
    border-bottom: 3px dashed #84b5a0;
}

.body1 h4 {
    font-weight: 400;
    margin-top: -11px;
    margin-bottom: 14px;
    font-size: large;
}

.uncompleted-box,
.completed-box,
.deleted-box {
    width: 360px;
    height: 190px;
    background-color: #b1d4ef;
    overflow: auto;
    border-radius: 15px;
}

.completed-box {
    display: none;
    background-color: #c9d3be;
}

.deleted-box {
    background-color: #f2a5a0;
}

.completed-title li {
    float: left;
    margin: 15px 25px 15px 0px;
    font-size: large;
}

.completed-li,
.uncompleted-li,
.emergency-li,
.deleted-li {
    position: relative;
    padding: 10px;
    text-overflow: ellipsis;
    border-radius: 15px;
    font-size: 10px;
    color: rgb(255, 255, 255);
    height: 45px;
    margin-bottom: 5px;
    background-color: #7a89a1;
}

.emergency-li {
    background-color: #455a69;
}

.completed-li {
    background-color: #5a795a;
}

.deleted-li {
    background-color: #b96a6f;
}

.iconbox,
.uniconbox,
.deleted-btn {
    float: right;
}

.recover-btn,
.clean-btn {
    line-height: 25px;
}

.recover-btn {
    margin-right: 11px;
}

.clean-btn {
    margin-right: 2px;
}

#taskText,
#unTaskText {
    position: absolute;
    top: 8px;
    margin-left: 10px;
    font-size: 20px;
    text-overflow: ellipsis;
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
}

.current {
    background-color: #8e83d4;
    border-radius: 9px;
}

.role {
    position: absolute;
    top: 0;
    left: 0;
    width: 195px;
    height: 287px;

}

.word-item1 {
    opacity: 0;
    transition: opacity .6s ease;
    position: absolute;
    left: -200px;
    top: 0;
    width: 393px;
    height: 87px;
    background: url(../images/click-mad.webp) center bottom no-repeat;
    background-size: 40% 40%;
    z-index: 999;
}

.word-item2 {
    position: absolute;
    left: -5px;
    top: 295px;
    width: 253px;
    height: 58px;
    border-radius: 25px;
    background-color: #4d4747;
    z-index: 999;
    opacity: 0;
    transition: opacity .6s ease;
}

.word-item2 p {
    margin: 16px auto;
    text-align: center;
    color: #fff;
    font-size: 17px;
}

.timer {
    position: absolute;
    margin-left: -12px;
    margin-top: -37px;
    height: 80px;
    width: 60px;
    z-index: 1;
    display: none;
    border-radius: 30px !important;
}

.timer span {
    width: 60px;
    height: 25px;
    border-radius: 5px;
    background-color: #737aa9;
    font-size: 16px;
    display: block;
    color: #ffffff;
    border: #6b6388 solid 1px;
}

.timer span:hover {
    background-color: #b0b6e4;
}